<template>
	<div class="blogroll">
		<h1>友情链接</h1>
		<ul>
			<!-- 通过v-for循环渲染所有链接 -->
			<li v-for="(link, index) in links" :key="index">
				<h2>
					<a :href="link.url" :target="link.target" :rel="link.rel">
						{{ link.name }}
					</a>
				</h2>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'blogRoll',
		data() {
			return {
				// 所有链接信息都放在这里，方便统一修改
				links: [{
						name: '站长 Gitee',
						url: 'https://gitee.com/zhangjianlin1123',
						target: '_blank',
						rel: 'noopener noreferrer'
					},
					{
						name: '站长首页',
						url: '/',
						target: '_blank',
						rel: 'noopener noreferrer'
					},
					{
						name: '站长·其他项目',
						url: 'http://120.25.151.21:2001',
						target: '_blank',
						rel: 'noopener noreferrer'
					},
					{
						name: '站长·社会数',
						url: 'http://ctrlikun.com',
						target: '_blank',
						rel: 'noopener noreferrer'
					}
				]
			}
		}
	}
</script>

<style>
	.explain {
		text-align: center;
		margin-top: 50px;
	}

	.blogroll {
		text-align: center;
		margin: 50px;
	}

	.blogroll ul li {
		margin: 18px 0;
	}
</style>